/* 严格锁定行高 */
.code-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #f8f8f8;
  counter-reset: line-number;
  line-height: 1.333; /* 精确的 24px (当 font-size: 18px 时) */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* 行组容器 */
.line-group {
  display: contents; /* 突破容器限制 */
}

/* 行号单元格 */
.line-number {
  grid-column: 1;
  padding: 0 1em;
  counter-increment: line-number;
  position: relative;
  text-align: right;
  background: #f0f0f0;
  color: #666;
  user-select: none;
  position: sticky;
  left: 0;
  z-index: 1;
}

/* 代码单元格 */
.code-line {
  grid-column: 2;
  padding: 0 1em;
  white-space: pre-wrap;
  tab-size: 4;
}

/* 严格高度控制 */
.line-number::before {
  content: counter(line-number);
  //counter-increment: line-number;
  display: block;
  text-align: right;
  padding-right: 1em;
  width: 100%;
  vertical-align: top; /* 统一对齐基准 */
}

.code-line {
  text-align: left !important;
  vertical-align: top; /* 与行号对齐基准一致 */
}

/* 行高锁定机制 */
.code-grid {
  --line-height: 24px; /* 根据实际字体大小调整 */
}

.line-number::before,
.code-line {
  height: var(--line-height);
  line-height: var(--line-height);
  min-height: var(--line-height);
}

/* 亚像素误差补偿 */
.code-grid {
  transform: translateZ(0); /* 启用GPU渲染 */
}

.line-number::before {
  position: relative;
  top: -0.5px; /* 微调对齐 */
}